<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>日本风的菜单</title>
    <link rel="stylesheet" href="./032.css" type="text/css" />
    <script>
      window.onload = () => {
        let shinchouMenuLinks = document.querySelectorAll(".shinchou-menu li a")
        shinchouMenuLinks.forEach((link) => {
          let letters = link.textContent.split("")
          link.textContent = ""
          letters.forEach((letter, i) => {
            let span = document.createElement("span")
            span.textContent = letter
            if (i < 2) {
              span.className = "highlight"
            }
            span.style.transitionDelay = `${i / 10}s`
            link.append(span)
          })
        })
      }
    </script>
  </head>
  <body>
    <!--
      将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单
     -->
    <ul class="shinchou-menu">
      <li><a href="#">ニュース</a></li>
      <li><a href="#">ストーリー</a></li>
      <li><a href="#">スターフ＆キャスト</a></li>
      <li><a href="#">キャラクター</a></li>
      <li><a href="#">放送·配信情報</a></li>
    </ul>
  </body>
</html>
